<template>
    <div class="ac-all">
        <div class="filter">
            <JButtons :list="buttons" v-model="curBtn" @change="onTypeChange"></JButtons>
            <v-menu class="header" transition="slide-y-reverse-transition" origin="end">
                <template v-slot:activator="{ props }">
                    <div class="j-search c-title-5" v-bind="props">
                        <span class="j-ctx">
                            <template v-if="curRange == searchRanges[0]">{{$t("message.Global.all")}}</template>
                            <template v-else> {{ formatBigNumber(curRange.from, 0) }} ~ {{ formatBigNumber(curRange.to, 0) }} </template>
                        </span>
                        <div class="ss-btn">
                            <!-- 全部 -->
                            <span class="iconfont icon-sanjiaoxing"></span>
                        </div>
                    </div>
                </template>
                <v-list style="transform: translateX(100%)">
                    <!-- <div class="inp-box">
                        <input type="text" class="coin-inp" v-model="search" @click.stop placeholder="search" />
                    </div> -->
                    <v-list-item v-for="(item, i) in searchRanges" @click="onRange(item, i)">
                        <v-list-item-title class="d-flex align-center fline">
                            <div class="i-txt c-title-5">
                                <template v-if="i == 0">{{$t("message.Global.all")}}</template>
                                <template v-else> {{ formatBigNumber(item.from, 0) }} ~ {{ formatBigNumber(item.to, 0) }} </template>
                            </div>
                            <div v-if="item == curRange" class="cir"></div>
                        </v-list-item-title>
                    </v-list-item>
                </v-list>
            </v-menu>
        </div>

        <v-table fixed-header class="tb">
            <thead>
                <tr class="th-r">
                    <th class="text-left" width="12%">時間</th>
                    <th class="text-left">從</th>
                    <th class="text-left" width="6%"></th>
                    <th class="text-left">到</th>
                    <th class="text-left" width="24%">数量</th>
                    <!-- <th class="text-left" width="10%">
                    金額
                </th> -->
                    <th class="text-left" width="12%">价值</th>
                    <th class="text-left" width="6%">操作</th>
                </tr>
            </thead>

            <tbody>
                <!-- <transition-group name="slide"> -->

                <tr class="th-t" v-for="item in desserts" :key="item.key" @click="onShow(item)">
                    <td :title="formatTimestamp(item.timestamp)">{{ item.ago }}</td>

                    <!-- 转账 -->
                    <template v-if="item.type == 'transfer'">
                        <td>
                            <div class="d-flex align-center">
                                <!-- <img src="@/assets/Star.png" class="coin-i" /> -->
                                <div class="icon-box ico-1">
                                    <span class="iconfont icon-touxiang"></span>
                                </div>
                                <Copy :text="item.fromTag || item.address"></Copy>
                            </div>
                        </td>
                        <td>
                            <img src="@/assets/one.png" class="ic-img" />
                        </td>
                        <td>
                            <div class="d-flex align-center">
                                <!-- <img src="@/assets/Star.png" class="coin-i" /> -->
                                <div class="icon-box ico-2">
                                    <span class="iconfont icon-icon_xinfang"></span>
                                </div>
                                <Copy :text="item.toTag || item.toAddress"></Copy>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-center">
                                <!-- <img :src="getImg(item)" class="ic-img" /> -->
                                <div class="flex-txt text-truncate" :class="item.outAmount > 0 ? 'win-color' : 'lose-color'" :title="item.outAmount">
                                    {{ formatBigNumber(item.outAmount) }} {{ item.outSymbol }}
                                </div>
                                <!-- <span class="flex-txt text-truncate" :title="getCoin(item)">{{ getCoin(item) }}</span> -->
                            </div>
                        </td>
                        <td class="">
                            <!-- <Copy :text="item.transactionHash"></Copy> -->
                            <span :title="item.outusdt">${{ formatBigNumber(item.outusdt) }}</span>
                        </td>
                    </template>

                    <!-- 成交 -->
                    <template v-else>
                        <td>
                            <div class="d-flex align-center">
                                <!-- <img src="@/assets/Star.png" class="coin-i" /> -->
                                <div class="icon-box ico-1">
                                    <span class="iconfont icon-touxiang"></span>
                                </div>
                                <Copy :text="item.fromTag || item.address"></Copy>
                            </div>
                        </td>
                        <td>
                            <img src="@/assets/two.png" class="ic-img" />
                        </td>
                        <td>
                            <div class="d-flex align-center">
                                <!-- <img src="@/assets/Star.png" class="coin-i" /> -->
                                <div class="icon-box ico-2">
                                    <span class="iconfont icon-icon_xinfang"></span>
                                </div>
                                <Copy :text="item.toTag || item.toAddress"></Copy>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex more-line">
                                <!-- <img :src="getImg(item)" class="ic-img" /> -->
                                <div class="flex-txt text-truncate lose-color" :title="item.outAmount">{{ formatBigNumber(item.outAmount) }} {{ item.outSymbol }}</div>
                                <div class="flex-txt text-truncate win-color" :title="item.inAmount">{{ formatBigNumber(item.inAmount) }} {{ item.inSymbol }}</div>
                                <!-- <span class="flex-txt text-truncate" :title="getCoin(item)">{{ getCoin(item) }}</span> -->
                            </div>
                        </td>
                        <td>
                            <span :title="item.outusdt">${{ formatBigNumber(item.outusdt) }}</span>
                        </td>
                    </template>
                    <td>
                        <span class="c-title-5 look" @click="onJump(item)">查看</span>
                    </td>
                </tr>
                <!-- </transition-group> -->
            </tbody>
            <!-- <JEmpty></JEmpty> -->
        </v-table>
        <div class="nones" v-show="desserts.length == 0">
            <JEmpty></JEmpty>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import Copy from "@/components/copy/index.vue";
import { useActivity } from "@/stores/activity";
import { formatNumber, formatBigNumber, formatTimestamp, formatTimeAgo } from "@/comm/format";
import { onMounted } from "vue";
import img1 from "@/assets/trans.png";
import img2 from "@/assets/dine.png";
import JButtons from "@/components/j-buttons/index.vue";
import JEmpty from "@/components/j-empty/index.vue";
const activity = useActivity();
const desserts = ref<any[]>([]);
// const buttons = ref(["所有", "交易", "转账"]);
const buttons = ref([
    {
        label: "所有",
        value: null
    },
    {
        label: "交易",
        value: "swap"
    },
    {
        label: "转账",
        value: "transfer"
    }
]);
const curBtn = ref<any>(null);

const searchRanges = ref([createRange(null as any, true), createRange([0, 1000]), createRange([1000, 100000]), createRange([100000, 100000000]), createRange([100000000, 1000000000000])]);

const curRange = ref(searchRanges.value[0]);

function createRange(ary: any[], choose = false) {
    if (!ary) {
        return { choose };
    }
    return {
        from: ary[0],
        to: ary[1],
        choose
    };
}

onMounted(async () => {
    curBtn.value = buttons.value[0];

    await activity.loadHistory();
    updateRange();
});

const onRange = (item: any, i: number) => {
    curRange.value = item;
    if (i == 0) {
        activity.changeRange(null);
    } else {
        activity.changeRange([item.from, item.to]);
    }
    // updateRange();
};

const onTypeChange = (t: any) => {
    // const list = [null, "swap", "transfer"];
    // const i = buttons.value.indexOf(t);
    // activity.changeFilterType(list[i]);
    // console.log("當前類型", t.value)
    activity.changeFilterType(t.value);
    // updateRange();
};

const updateRange = () => {
    // console.log(activity.activitys.length, "len")
    let ary = [...activity.visibleRange];
    ary.forEach(i => {
        i.ago = formatTimeAgo(i.timestamp);
    });
    desserts.value = ary;
    setTimeout(updateRange, 300);
};

// const desserts = computed(() => {
//     return activity.activitys;
// });

const getImg = (item: any) => {
    if (item.type == "transfer") {
        return img1;
    }
    return img2;
};

const onJump = (item: any) => {
    window.open("https://etherscan.io/tx/" + item.transactionHash);
};

const getNum = (item: any) => {
    const t = formatBigNumber(item.inAmount || item.outAmount);
    if (t == 0) {
        if (item.type != "transfer") {
            console.log("null---", item);
        }
    }
    return t;
};
const getCoin = (item: any) => {
    return item.inAmount ? item.inSymbol : item.outSymbol;
};

const onShow = (item: any) => {
    console.log(item);
};

// // 创建一个 Date 对象并设置时间戳（以毫秒为单位）
// const timestamp = 1632825600000; // 例如，这是一个时间戳

// // 选择目标时区
// const targetTimeZone = 'America/New_York'; // 例如，将时区设置为纽约

// // 创建一个日期对象，同时指定时区
// const dateInTargetTimeZone = new Date(timestamp);
// const options = { timeZone: targetTimeZone };

// // 使用 Intl.DateTimeFormat 格式化日期对象
// const formattedDate = new Intl.DateTimeFormat('en-US', options).format(dateInTargetTimeZone);

// console.log(formattedDate); // 输出格式化后的日期字符串

// const desserts = ref([
//     {
//         address: "0x35d2d88a8a3c6fe153ab3d4eb7ab0b31508239d5",
//         children: {
//             inAmount: 251812040178,
//             inSymbol: "PEPEMAN",
//             outAmount: 0,
//             outSymbol: "WETH",
//         },
//         fromContract: "0x35d2d88a8a3c6fe153ab3d4eb7ab0b31508239d5",
//         timestamp: 1690935467000,
//         toAddress: "0x7a250d5630b4cf539739df2c5dacb4c659f2488d",
//         toContract: "0x7a250d5630b4cf539739df2c5dacb4c659f2488d",
//         transactionHash: "0x16eda129209b7fa1fe580ab11b0495ef3ca3"
//     }
// ])
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
